<template>
  <div class="bd-all">
    <div class="bd-con">
      <span>滚动方向：</span>
      <div class="bd-spot">
        <el-radio v-model="bdobj.direction" label="1">向上</el-radio>
        <el-radio v-model="bdobj.direction" label="2">向左</el-radio>
      </div>
    </div>
    <div class="bd-con">
      <span>图标样式：</span>
      <div class="bd-spot">
        <el-radio v-model="bdobj.sty" label="1">默认</el-radio>
        <el-radio v-model="bdobj.sty" label="2">自定义</el-radio>
      </div>
    </div>
    <div class="choose-btn" v-show="showImage">
      <div class="choose-btn-img">
        <img :src="bdobj.imgUrl" alt />
      </div>
      <div class="choose-btn-con" @click="showImg = true">
        <span>选择图标</span>
      </div>
    </div>
    <div class="bd-con">
      <span>公告内容：</span>
      <div class="bd-spot">
        <el-radio v-model="bdobj.textcon" label="1">新闻</el-radio>
        <el-radio v-model="bdobj.textcon" label="2">公告</el-radio>
        <el-radio v-model="bdobj.textcon" label="3">服务</el-radio>
      </div>
    </div>
    <div class="bd-con bd-con-left">
      <span>滚动条数：</span>
      <input type="text" v-model="bdobj.twig" class="mainKey" />
      <span style="margin-left:8px">条</span>
    </div>
    <UploadImages @closeModel="closeModel" :dialogVisible="showImg"></UploadImages>
  </div>
</template>
<script>
import UploadImages from "@/components/UploadImages/UploadImages";
import { mapGetters } from "vuex";
export default {
  components: { UploadImages },
  name: "Setdiybd",
  data() {
    return {
      showImage: false,
      showImg: false
    };
  },
  computed: {
    ...mapGetters(["bdobj"]),
    nowImage: {
      get: function(val) {
        return this.$store.state.imgs.imgUrl;
      }
    }
  },
  watch: {
    nowImage: function(val) {
      this.$store.commit("notice/SET_IMGURL", val);
    },
    bdobj: {
      handler(oldVal, newVal) {
        // 更新vuex里面的PageJSON
        this.$store.dispatch("apply/PageJSONUpData");
        // 更新父组件中的PageJSON
        this.$emit("updataNowPageJSON", newVal);
        if (Number(this.bdobj.sty) === 2) {
          this.showImage = true;
        } else {
          this.showImage = false;
        }
      },
      deep: true
    }
  },
  methods: {
    closeModel() {
      this.showImg = false;
    }
  }
};
</script>
<style lang="scss" scoped>
@import "./diyset.scss";
.bd-all {
  width: 100%;
  height: 100%;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  .bd-con {
    @include flexCon(278px, 44px, center, flex-start, 64px);
    position: relative;
    input {
      @include wd(225px, 30px);
      background: rgba(255, 255, 255, 1);
      border-radius: 3px;
      font-size: 14px;
      padding-left: 8px;
      border: 1px solid rgba(223, 223, 223, 1);
    }
  }
  .bd-con {
    @include flexCon(334px, 50px, center, space-between, 64px);
    justify-content: left;
    position: relative;
    .bd-con-style {
      width: 214px;
      img {
        width: 76px;
        height: 60px;
      }
    }
    input {
      @include wd(225px, 30px);
      background: rgba(255, 255, 255, 1);
      border-radius: 3px;
      font-size: 14px;
      padding-left: 8px;
      border: 1px solid rgba(223, 223, 223, 1);
    }
    .bd-spot {
      margin-left: 10px;
    }
    .mainKey {
      width: 80px;
      height: 30px;
      border-radius: 2px;
      border: 1px solid rgba(224, 225, 232, 1);
    }
    .add-tag {
      @include wd(auto, 30px);
      border-radius: 2px;
      font-size: 14px;
      text-align: center;
      line-height: 30px;
      padding: 0 10px;
      border: 1px solid rgba(224, 225, 232, 1);
      cursor: pointer;
    }
  }
  .bd-con-img {
    justify-content: flex-start;
    padding-left: 50px;
    .upimg {
      margin-left: 30px;
    }
  }
  .bd-con-left {
    justify-content: flex-start;
    input {
      margin-left: 10px;
    }
  }
}
.el-radio {
  margin-right: 10px;
}
.choose-btn {
  width: 35%;
  height: 50px;
  display: flex;
  margin-left: 37%;
  align-items: center;
  justify-content: space-between;
  .choose-btn-img {
    width: 44px;
    height: 44px;
    border-radius: 3px;
    overflow: hidden;
    background: rgba(214, 235, 255, 1);
    img {
      width: 100%;
      height: 100%;
    }
  }
  .choose-btn-con {
    width: 80px;
    height: 30px;
    border-radius: 2px;
    background: #e0e1e8;
    color: #353535;
    font-size: 12px;
    text-align: center;
    line-height: 30px;
    border: 1px solid rgba(224, 225, 232, 1);
    cursor: pointer;
  }
}
</style>
